<template>
  <div class="location">
    <!-- 搜索框 -->
    <form action="/">
      <van-search
        v-model="value"
        placeholder="搜索城市"
        show-action
        shape="round"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <!-- 头部城市名 -->
    <div class="location-head">
      <!-- 当前/最近访问 -->
      <div class="label">当前/最近访问</div>
      <div class="top-city">
        <div class="city-card">
          <img class="zb" src="@/assets/location.png" alt v-show="currentCity=='昆山'" />
          昆山
        </div>
        <div class="city-card">
          <img src="@/assets/location.png" alt v-show="currentCity=='上海'" />上海
        </div>
        <div class="city-card">苏州</div>
      </div>
      <!-- 热门城市 -->
      <div class="label">热门城市</div>
      <div class="hot-city">
        <div class="city-card">广州</div>
        <div class="city-card">重庆</div>
        <div class="city-card">北京</div>
        <div class="city-card">杭州</div>
        <div class="city-card">上海</div>
        <div class="city-card">苏州</div>
        <div class="city-card">三亚</div>
        <div class="city-card">南京</div>
        <div class="city-card">西安</div>
        <div class="city-card">长沙</div>
        <div class="city-card">珠海</div>
        <div class="city-card">武汉</div>
      </div>
    </div>
    <!-- 城市索引 -->
    <div class="location-list">
      <van-index-bar :sticky="false">
        <van-index-anchor index="A" />
        <van-cell title="安丘" />
        <van-cell title="安化" />
        <van-cell title="安庆" />
        <van-index-anchor index="B" />
        <van-cell title="北京" />
        <van-cell title="北海" />
        <van-index-anchor index="C" />
        <van-cell title="1北京" />
        <van-cell title="1北海" />
        <van-index-anchor index="D" />
        <van-cell title="2北京" />
        <van-cell title="2北海" />
        <van-index-anchor index="E" />
        <van-cell title="3北京" />
        <van-cell title="3北海" />
        <van-index-anchor index="F" />
        <van-cell title="4北京" />
        <van-cell title="4北海" />
        <van-index-anchor index="G" />
        <van-cell title="5北京" />
        <van-cell title="5北海" />
      </van-index-bar>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      currentCity: "昆山"
    };
  },
  methods: {
    //搜索
    onSearch() {
      console.log(arguments);
    },
    //取消输入
    onCancel() {
      console.log(arguments);
    },
    //选择城市字符
    selectCity(index) {
      console.log(index);
    }
  }
};
</script>

<style lang="scss" scoped>
.location {
  height: 667px;
  //顶部城市
  .location-head {
    padding: 0 18px 18px 18px;
    overflow: hidden;
    background: rgba(245, 245, 245, 1);
    .label {
      font-size: 15px;
      font-weight: 800;
      margin: 15px 0;
    }
    .top-city,
    .hot-city {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .city-card {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 105px;
      background: #fff;
      line-height: 33px;
      text-align: center;
      border-radius: 5px;
      .zb {
        width: 16px;
        height: 16px;
        margin-right: 8px;
      }
      &:nth-child(n + 4) {
        margin-top: 10px;
      }
    }
  }
  //城市列表
  .location-list {
    height: 283px;
    overflow: auto;
    /deep/.van-index-anchor {
      background: rgba(245, 245, 245, 1);
    }
    .van-cell {
      padding: 7px 15px;
    }
  }
}
</style>